<template>
  <el-dialog
    top="30px"
    width="800px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    title="保单详情"
    :visible.sync="visible"
  >
    <c-table
      border
      v-loading="loading"
      class="table-sm"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    idCard: {
      type: String,
      default: '',
    },
    registerNo: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: false,
      tableData: [],
      tableColumns: [
        { attrs: { label: '保险名', prop: 'agency_name' } },
        { attrs: { label: '保费', prop: 'ins_fee' } },
        { attrs: { label: '保额', prop: 'ins_funds' } },
        { attrs: { label: '投保人', prop: 'ins_person' } },
        { attrs: { label: '险种', prop: 'insurance_class_name' } },
        { attrs: { label: '规模', prop: 'scale' } },
        { attrs: { label: '自缴额', prop: 'self_fee' } },
      ],
    }
  },

  computed: {
    idString() {
      return this.idCard + this.registerNo
    },
  },

  watch: {
    idString: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },

  created() {},
  methods: {
    getData() {
      this.tableData = []
      if (!this.idCard && !this.registerNo) return
      const params = {
        'orWhere.lender_idcard.eq': this.idCard,
        'orWhere.register_no.eq': this.registerNo,
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, 'datum_customer_insurance_order_view', params)
        .then(res => {
          this.tableData = (res && res.data) || []
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped></style>
